<template>
	<view class="container">
		<view class="content">
			<view class="zcTitle">
				注册
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/姓名.png">
				</image>
				<input v-model="PatientDto.name" placeholder="请输入您的姓名" maxlength="18" />
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/账户.png"/>
				<input v-model="PatientDto.idCard" placeholder="请输入身份证号" maxlength="18" />
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/性别.png">
				</image>
				<radio-group class="genderRadio">
					<radio value="1" :checked="PatientDto.sex === '1'" color="#409EFF"
						style="transform: scale(0.7); margin-right: 15px" class="radio">男
					</radio>
					<radio value="2" :checked="PatientDto.sex === '2'" color="#409EFF" style="transform: scale(0.7)"
						class="radio">女</radio>
				</radio-group>
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/电话.png">
				</image>
				<input v-model="PatientDto.phone" placeholder="请输入联系电话" maxlength="11" />
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/生日.png">
				</image>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="PatientDto.birthday" />
			</view>
			<view class="row-input">
				<image mode="aspectFit" src="/static/地址.png">
				</image>
				<input v-model="PatientDto.address" placeholder="(选填)请输入地址" />
			</view>
			<view class="login-btn" @click="onInputChange(PatientDto)">
				立即注册
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addPatient
	} from '../../api/patient/index.js'
	export default {
		data() {
			return {
				PatientDto: {
					"name": "",
					"phone": "",
					"sex": "1",
					"birthday": '',
					"idCard": "",
					"address": "",
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 封装手机号验证函数
			validateMobile(mobile) {
				// 去除字符串两端的空白字符
				mobile = mobile.trim();
				// 去除常见的分隔符，如空格、短横线、点号等
				mobile = mobile.replace(/[-\s.]/g, '');
				return /^1[3-9]\d{9}$/.test(mobile);
			},
			// 封装身份证号验证函数
			validateIDCard(idCard) {
				// 18 位身份证号正则表达式
				const reg18 = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/;
				// 15 位身份证号正则表达式
				const reg15 = /^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$/;

				if (reg18.test(idCard)) {
					// 18 位身份证号加权因子
					const weight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
					// 18 位身份证号校验码对应值
					const validCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
					let sum = 0;
					for (let i = 0; i < 17; i++) {
						sum += parseInt(idCard[i]) * weight[i];
					}
					const mod = sum % 11;
					const lastChar = idCard[17].toUpperCase();
					return lastChar === validCodes[mod];
				} else if (reg15.test(idCard)) {
					return true;
				}
				return false;
			},
			// 点击注册按钮时触发
			onInputChange(e) {
				const mobile = e.phone;
				const idCard = e.idCard;
				const birthday = e.birthday;
				const patient = e
				if(e.name == ""){
					// 用户名为空，提示用户
					wx.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
				} else {
					if (this.validateIDCard(idCard)) {
						if (this.validateMobile(mobile)) {
							// 手机号格式正确，可进行下一步操作，如获取验证码等
							console.log('手机号格式正确，可以进行下一步操作');
							if (birthday) {
								// 可以添加页面跳转
								addPatient(patient).then(res => {
									if (res.data == null) {
										// 注册成功，提示用户
										wx.showToast({
											title: '注册成功',
											icon: 'success'
										});
										// 跳转到登录页面
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/login/login'
											})
										}, 1000)
									} else {
										// 注册失败，提示用户
										wx.showToast({
											title: '注册失败',
											icon: 'none'
										});
									}
								})
							} else {
								// 生日为空，提示用户
								wx.showToast({
									title: '请选择生日',
									icon: 'none'
								});
								// 可以添加震动反馈
								wx.vibrateShort({
									success: () => console.log('震动反馈成功')
								});
							}
						} else {
							// 手机号格式错误，提示用户
							wx.showToast({
								title: '请输入正确的手机号',
								icon: 'none'
							});
							// 可以添加震动反馈
							wx.vibrateShort({
								success: () => console.log('震动反馈成功')
							});
						}
					} else {
						wx.showToast({
							title: '请输入正确的身份证号',
							icon: 'none'
						});
						// 可以添加震动反馈
						wx.vibrateShort({
							success: () => console.log('震动反馈成功')
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		height: 100vh;
		background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);

		.content {
			padding: 50rpx 40rpx;
			border-radius: 32rpx;
			box-shadow: 0 12rpx 48rpx rgba(0,0,0,0.1);
			margin-top: 80rpx;
			background: #fff;
		}
	}

	.row-input {
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #E9ECEF;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		height: 120rpx;

		&:focus-within {
			border-color: #67C23A;
		}

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 30rpx;
		}

		input {
			font-size: 32rpx;
			color: #212529;
			padding: 16rpx 0 16rpx 20rpx;
			flex: 1;
			line-height: 1.5;
			height: 50px;
		}
	}

	.login-btn {
		background: linear-gradient(45deg, #67C23A, #85CE61);
		box-shadow: 0 8rpx 32rpx rgba(103,194,58,0.3);
		transition: all 0.3s ease;
		font-weight: 500;
		letter-spacing: 2rpx;
		border-radius: 48rpx;
		padding: 24rpx 0;
		margin-top: 40rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(103,194,58,0.25);
		}
	}

	.genderRadio {
		margin-left: 24rpx;
		display: flex;
		align-items: center;

		radio {
			margin-right: 40rpx;
		}
	}

	.zcTitle {
		font-size: 52rpx;
		color: #212529;
		margin-bottom: 50rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
		text-align: center;
	}
</style>